<!-- 全局自定义弹窗 -->
<template>
	<view class="cu-modal " :class="[modalName == tag ? 'show' : '',mode=='bottom'?'bottom-modal':'']"  @click.stop="onHideModal" 
	@touchmove.stop = "" @touchmove.stop.prevent="">
		<view class="cu-dialog" :class="bgColor!=''?bgColor:'cu-dialog-none'" @click.stop="" @touchmove.stop = "">
			<!-- 对外插槽名为content -->
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null
			};
		},
		name: 'cu-modal',
		computed: {
			style() {
				var style = '';
				return style;
			}
		},
		props: {

			tag: { //对应标记
				type: String,
				default: ''
			},
			show: { //显示标记，如果show==tag即显示该dialog
				type: String,
				default: null
			},
			mode: { //显示标记,center 居中,bottom 底部
				type: String,
				default: 'center'
			},
			bgColor: { //对话框背景色
				type: String,
				default: 'bg-white'
			}
		},
		watch: {
			show: function(data) {
				this.modalName = data;
			}
		},
		created() {

		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target;
			},
			onHideModal(e) {
				this.$emit('onHideModal', e);
			}
		}
	};
</script>

<style scoped lang="scss">
	.cu-modal.bottom-modal .cu-dialog {
		border-top-left-radius: 24upx;
		border-top-right-radius: 24upx;
		overflow: initial !important;
	}

	.cu-dialog-none {
		background: none;
	}
</style>
